import { TreeSelectKeyContext } from '@/pages/accountingEntryTest';
import { CheckBox, NumberBox, RadioGroup, SelectBox, TextBox } from 'devextreme-react';
import Button from 'devextreme-react/button';
import {
  Item as ItemGrid,
  Selection,
  Summary,
  Toolbar as ToolbarGrid,
  TotalItem,
} from 'devextreme-react/data-grid';
import { Item } from 'devextreme-react/toolbar';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import './index.less';

import { moneyFormatCol, nanoid10 } from '@/utils';
import { DevGrid, DevToolBar } from '~/public/cpas-ui';
import CertificateListPupop from '../certificateListPupop';
import PersonnelMaintenancePupop from '../personnelMaintenancePupop';
import {
  columnsCheckJob,
  columnsDataM,
  columnsDataM2,
  columnsDataMEJZ,
  columnsDataMQ1,
  columnsDataMQW,
  columnsDataMW1,
} from './columnData';

import { msgInfo } from '@/utils/msg';
import notify from 'devextreme/ui/notify';
import { useModel } from 'umi';
import AccountingVoucherPupop from '../accountingVoucherPupop';
import { getChangeApiNameData } from '../service';

const ComponentTableListList = (props: any) => {
  const { treeSelecNode, setTreeSelecNode, resizeWidthObj } = useContext<any>(TreeSelectKeyContext);
  const { treeSelectKey, tableYearArr, treeSelectName, yearID } = treeSelecNode;
  const { changeTab } = props;

  const { initialState } = useModel('@@initialState');
  const { dbname, sjnd } = initialState?.curPart as any;

  const [devBox, setDevBox] = useState<any>('guid');
  const [tempColumnsData, setTempColumnsData] = useState<any[]>([]);

  const [dataGridData, setDataGridData] = useState<any[]>([]);

  const dataGridDataAll = useRef<any>([]);

  // 获取当前年的每个月最后一天 格式为 ['1.31','2.28','3.31',...,'12.31']
  function getLastDaysOfMonthArray(year: number) {
    const lastDays: any[] = [];
    for (let month = 0; month < 12; month++) {
      const date = new Date(year, month + 1, 0);
      lastDays.push(month + 1 + '.' + date.getDate());
    }
    return lastDays.join(';');
  }

  const [searchParams, setSearchParams] = useState<any>({
    // yearID: sjnd,
    checkBoxData: true,
    valYH1: 2,
    valWs: '99;88;.77;',
    valStrLenCheck: 2,
    valStrLen: 4,
    valQmrq: getLastDaysOfMonthArray(Number(sjnd)),
    valQmrqCheck: 2,
    valGjz: '',
    valGjzCheck: 2,
  });

  const [className111, setClassName111] = useState<string>('');
  const [classNameDev, setClassNameDev] = useState<string>('');

  const personnelMaintenancePupopRef = useRef<any>(null);
  const devGridRef = useRef<any>(null);
  const certificateListPupopRef = useRef<any>(null);
  const accountingVoucherPupopRef = useRef<any>(null);

  const changeSqlText = (valuesToMatch: string[]) => {
    let sqlCondition = '';
    if (valuesToMatch.length > 0) {
      sqlCondition = 'AND (';
      for (let i = 0; i < valuesToMatch.length; i++) {
        if (i > 0) {
          sqlCondition += ' OR ';
        }
        const value = valuesToMatch[i];
        const lengthCheck = value.length; // 根据值的长度决定使用2还是3
        sqlCondition += `(RIGHT(CAST(CAST(ISNULL(JFJE, 0) + ISNULL(DFJE, 0) AS numeric(28, 2)) AS varchar(255)), ${lengthCheck}) = '${value}')`;
      }
      sqlCondition += ')';
    }

    return sqlCondition;
  };
  const changeSqlOrAndFun_0_2 = (numTemp: number) => {
    let reStr = 'and';
    if (numTemp === 1) {
      reStr = 'and';
    } else {
      reStr = 'or';
    }
    return reStr;
  };

  const changeSqlTextFun_0_21 = (valueData: string) => {
    let targetMonths = '';
    if (valueData !== '') {
      const monthsSplit = valueData.split(';');
      const formattedMonths = monthsSplit.map((month: any) => {
        const [monthNumber, day] = month.split('.');
        return `${('0' + (parseInt(monthNumber) || 1)).slice(-2)}${('0' + parseInt(day)).slice(
          -2,
        )}`;
      });
      const strMonths = formattedMonths.join(';');
      targetMonths = `(CHARINDEX(RIGHT(PZRQ,4),'${strMonths}')>1)`;
    }
    return targetMonths;
  };

  const changeSqlWhereTextFun = (valsParams: any) => {
    const { valQmrq, valQmrqCheck, valStrLen, valStrLenCheck, valGjz, valGjzCheck } = valsParams;
    let strWhere = '';
    const strQmrqCheck = changeSqlOrAndFun_0_2(valQmrqCheck);
    const strStrLenCheck = changeSqlOrAndFun_0_2(valStrLenCheck);
    const strGjzCheck = changeSqlOrAndFun_0_2(valGjzCheck);
    const strQmrqText = changeSqlTextFun_0_21(valQmrq);
    strWhere = `${valQmrq !== '' && valQmrq ? `${strQmrqCheck} ${strQmrqText}` : ''}
        ${valStrLen !== 0 ? `${strStrLenCheck} Len(ZY)<=${valStrLen}` : ''}
        ${valGjz !== '' && valGjz ? `${strGjzCheck} (ZY like '%${valGjz}%')` : ''}`;
    return strWhere;
  };

  const getRequestData = async (
    treeKeys: string,
    tabKeys: string,
    tempData_ID: string,
    cheackBox: boolean = false,
  ) => {
    setTreeSelecNode((oldData: any) => {
      const newData: any = { ...oldData };
      newData.spinLoad = true;
      return newData;
    });
    let otherWhere = '';
    let apiNameTemp = '';
    if (treeKeys === '0-0-0') {
      if (tabKeys === '1') {
        apiNameTemp = 'accountingEntryTest.journalMonthAmount.getDataList'; // 获取序时账月发生额分析列表
      } else {
        apiNameTemp = 'accountingEntryTest.subjectAmount.getDataList'; // 获取科目记账汇总分析列表
      }
    } else if (treeKeys === '0-0-0-0') {
      if (tabKeys === '1') {
        apiNameTemp = 'accountingEntryTest.accountantBill.getDataList'; // 会计分录作出人员统计
      } else {
        apiNameTemp = 'accountingEntryTest.accountantJobCheck.getDataList'; // 检查岗位职责
      }
    } else if (treeKeys === '0-0-1') {
      apiNameTemp = 'accountingEntryTest.jumpNumberTest.getDataList'; // 获取跳号测试分析列表
    } else if (treeKeys === '0-0-0-1') {
      apiNameTemp = 'accountingEntryTest.entriesTest.getDataList'; // 分录涉及不相关、异常或很少使用的账户
    } else if (treeKeys === '0-0-0-2') {
      apiNameTemp = 'accountingEntryTest.entriesTestQM.getDataList'; // 分录在期末或结账过程中作出，且没有或只有很少的解释或描述
      otherWhere = changeSqlWhereTextFun(searchParams);
    } else if (treeKeys === '0-0-0-3') {
      apiNameTemp = 'accountingEntryTest.noneSubjectCode.getDataList'; // 分录在编制财务报表之前或编制过程中作出且没有科目代码
    } else if (treeKeys === '0-0-0-4') {
      const { valWs } = searchParams;
      const bbbbbbb = valWs.split(';').filter((part: any) => part !== '');
      apiNameTemp = 'accountingEntryTest.roundingNumber.getDataList'; // 分录金额为约整数或尾数一致
      otherWhere = changeSqlText(bbbbbbb);
    } else {
      apiNameTemp = '';
    }

    // accountingEntryTest.roundingNumber.getDataList 分录金额为约整数或尾数一致
    // accountingEntryTest.noneSubjectCode.getDataList 分录在编制财务报表之前或编制过程中作出且没有科目代码

    // accountingEntryTest.entriesTestQM.getDataList  // 分录在期末或结账过程中作出，且没有或只有很少的解释或描述
    const res: any = await getChangeApiNameData(apiNameTemp, {
      dbname,
      Data_ID: tempData_ID,
      otherWhere,
    });
    if (res.success) {
      if (res.data.length > 0) {
        res.data.forEach((element: any) => {
          element.dataGuid = nanoid10();
        });
        if (cheackBox) {
          if (treeSelectKey === '0-0-0') {
            const data_0_0_0 = res.data.filter((item: any) => {
              return Math.round(item.Diff * 100) / 100 > 0;
            });
            setDataGridData(data_0_0_0);
          } else if (treeSelectKey === '0-0-1') {
            const data_0_0_1 = res.data.filter((item: any) => {
              return item.gap > 0;
            });
            setDataGridData(data_0_0_1);
          } else {
            setDataGridData(res.data);
          }
        } else {
          setDataGridData(res.data);
        }
        dataGridDataAll.current = res.data;
      } else {
        setDataGridData([]);
      }
      const scrollableSet = devGridRef?.current?.instance?.getScrollable();
      scrollableSet?.scrollTo({ top: 0 });
      setTreeSelecNode((oldData: any) => {
        const newData: any = { ...oldData };
        newData.spinLoad = false;
        return newData;
      });
    } else {
      setDataGridData([]);
      setTreeSelecNode((oldData: any) => {
        const newData: any = { ...oldData };
        newData.spinLoad = false;
        return newData;
      });
      notify('获取数据的接口请求报错！', 'error', 3000);
    }
  };

  const changeTabs = (treeKey: string, tabkey: any) => {
    if (tabkey) {
      setClassNameDev('componentTableListList');
      // setDataSourceArr(generateData(100, 30, tabkey));
      setClassName111('componentTableListList-grid');
      if (treeKey === '0-0-0') {
        if (changeTab === '1') {
          setTempColumnsData(columnsDataM);
        } else {
          setTempColumnsData(columnsDataM2);
        }
      }
      if (treeKey === '0-0-0-0') {
        if (changeTab === '1') {
          setTempColumnsData(columnsDataMW1);
        } else {
          setTempColumnsData(columnsCheckJob);
        }
      }

      getRequestData(treeKey, tabkey, yearID, true);
    } else {
      // setDataSourceArr(generateData(100, 30, '999'));
      setClassNameDev('');
    }
  };

  useEffect(() => {
    // 初始化 基础数据
    setSearchParams({
      // yearID: sjnd,
      checkBoxData: true,
      valYH1: 2,
      valWs: '99;88;.77;',
      valStrLenCheck: 2,
      valStrLen: 4,
      valQmrq: getLastDaysOfMonthArray(Number(sjnd)),
      valQmrqCheck: 2,
      valGjz: '',
      valGjzCheck: 2,
    });
    setDevBox(nanoid10());

    if (treeSelectKey === '0-0-0' || treeSelectKey === '0-0-0-0') {
      changeTabs(treeSelectKey, changeTab);
    } else if (treeSelectKey === '0-0-1') {
      setTempColumnsData(columnsDataMQ1);
      getRequestData(treeSelectKey, changeTab, yearID, searchParams.checkBoxData);
    } else if (treeSelectKey === '0-0-0-1') {
      setTempColumnsData(columnsDataMQW);
      getRequestData(treeSelectKey, changeTab, yearID, searchParams.checkBoxData);
    } else if (
      treeSelectKey === '0-0-0-2' ||
      treeSelectKey === '0-0-0-3' ||
      treeSelectKey === '0-0-0-4'
    ) {
      setTempColumnsData(columnsDataMEJZ);
      getRequestData(treeSelectKey, changeTab, yearID, searchParams.checkBoxData);
    } else {
      setTempColumnsData([]);
      setDataGridData([]);
    }
  }, [changeTab, treeSelectKey]);

  const tmepDataGrid = useMemo(() => {
    // console.log(tempColumnsData, devBox, tableYearArr, dataGridData, '@@@');
    const {
      checkBoxData,
      valWs,
      valStrLenCheck,
      valStrLen,
      valQmrq,
      valQmrqCheck,
      valGjz,
      valGjzCheck,
    } = searchParams;
    if (tempColumnsData?.length > 0) {
      let tempDataText = '无数据';
      if (treeSelectKey === '0-0-0') {
        tempDataText = '无差异'
      } else if (treeSelectKey === '0-0-1') {
        tempDataText = '无跳号单据'
      }

      return (
        <div
          className={`componentTableListBox
         ${classNameDev} ${treeSelectKey === '0-0-0-2' || treeSelectKey === '0-0-0-4'
              ? 'componentTableListBox54'
              : ''
            }`}
          key={devBox}
        >
          {treeSelectKey === '0-0-0-2' && (
            <div className={'search-tool-container1'}>
              <div style={{ width: '100%' }}>
                <DevToolBar.Default>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div
                      style={{
                        width: '150px',
                        paddingRight: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div
                        style={{
                          width: '48px',
                          padding: '0 2px',
                          lineHeight: '30px',
                        }}
                      >
                        年度：
                      </div>
                      <SelectBox
                        width="100"
                        height="36"
                        dataSource={tableYearArr}
                        displayExpr="Data_ID"
                        valueExpr="Data_ID"
                        value={yearID}
                        onValueChanged={(e: any) => {
                          setTreeSelecNode((oldData: any) => {
                            const newData: any = { ...oldData };
                            newData.yearID = e.value;
                            return newData;
                          });
                          getRequestData(treeSelectKey, changeTab, e.value, checkBoxData);
                        }}
                      />
                    </div>
                  </Item>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div
                      style={{
                        borderRight: '2px solid #e3e3e3',
                        borderLeft: '2px solid #e3e3e3',
                        padding: '0 8px',
                      }}
                    >
                      <div
                        style={{
                          width: '225px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        {/* <Radio.Group
                        onChange={(e: any) => {
                          setSearchParams((oldData: any) => {
                            return { ...oldData, valQmrqCheck: e.target.value };
                          });
                        }}
                        value={valQmrqCheck}
                      >
                        <Radio value={1}>与</Radio>
                        <Radio value={2}>或</Radio>
                      </Radio.Group> */}

                        <RadioGroup
                          items={[
                            { id: 1, text: '与' },
                            { id: 2, text: '或' },
                          ]}
                          value={valQmrqCheck}
                          valueExpr="id"
                          displayExpr="text"
                          onValueChanged={(e) => {
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valQmrqCheck: e.value };
                            });
                          }}
                          layout="horizontal"
                        />
                      </div>
                      <div
                        style={{
                          width: '225px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        <div
                          style={{
                            width: '70px',
                            padding: '0 5px',
                          }}
                        >
                          期末日期:
                        </div>
                        <TextBox
                          value={valQmrq}
                          width={150}
                          // valueChangeEvent='input'
                          onInput={(value: any) => {
                            console.log(value, '@@@');
                          }}
                          onValueChange={(value: any) => {
                            console.log(value, '@@@');
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valQmrq: value };
                            });
                          }}
                        />
                      </div>
                    </div>
                  </Item>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div style={{ padding: '0 8px' }}>
                      <div
                        style={{
                          width: '175px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        <RadioGroup
                          items={[
                            { id: 1, text: '与' },
                            { id: 2, text: '或' },
                          ]}
                          value={valStrLenCheck}
                          valueExpr="id"
                          displayExpr="text"
                          onValueChanged={(e) => {
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valStrLenCheck: e.value };
                            });
                          }}
                          layout="horizontal"
                        />
                        {/* <Radio.Group
                        onChange={(e: any) => {
                          console.log(e.target.value, '@@@');

                          setSearchParams((oldData: any) => {
                            return { ...oldData, valStrLenCheck: e.target.value };
                          });
                        }}
                        value={valStrLenCheck}
                      >
                        <Radio value={1}>与</Radio>
                        <Radio value={2}>或</Radio>
                      </Radio.Group> */}
                      </div>
                      <div
                        style={{
                          width: '175px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        <div
                          style={{
                            width: '100px',
                            padding: '0 5px',
                          }}
                        >
                          摘要字符长度:
                        </div>
                        <NumberBox
                          value={valStrLen}
                          width={70}
                          min={0}
                          format="#"
                          onValueChange={(value: any) => {
                            console.log(value, '@@@');
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valStrLen: value || 0 };
                            });
                          }}
                        />
                      </div>
                    </div>
                  </Item>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div
                      style={{
                        borderRight: '2px solid #e3e3e3',
                        borderLeft: '2px solid #e3e3e3',
                        padding: '0 8px',
                      }}
                    >
                      <div
                        style={{
                          width: '210px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        {/* <Radio.Group
                        onChange={(e: any) => {
                          setSearchParams((oldData: any) => {
                            return { ...oldData, valGjzCheck: e.target.value };
                          });
                        }}
                        value={valGjzCheck}
                      >
                        <Radio value={1}>与</Radio>
                        <Radio value={2}>或</Radio>
                      </Radio.Group> */}
                        <RadioGroup
                          items={[
                            { id: 1, text: '与' },
                            { id: 2, text: '或' },
                          ]}
                          value={valGjzCheck}
                          valueExpr="id"
                          displayExpr="text"
                          onValueChanged={(e) => {
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valGjzCheck: e.value };
                            });
                          }}
                          layout="horizontal"
                        />
                      </div>
                      <div
                        style={{
                          width: '210px',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        <div
                          style={{
                            width: '85px',
                            padding: '0 5px',
                          }}
                        >
                          摘要关键字:
                        </div>
                        <TextBox
                          width={120}
                          value={valGjz}
                          // valueChangeEvent='focusout'
                          onInput={(value: any) => {
                            console.log(value, '@@@');
                          }}
                          onValueChange={(value: any) => {
                            console.log(value, '@@@');
                            setSearchParams((oldData: any) => {
                              return { ...oldData, valGjz: value };
                            });
                          }}
                        // inputAttr={nameLabel}
                        />
                      </div>
                    </div>
                  </Item>
                  <Item location={'before'}>
                    <div
                      style={{
                        height: '60px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <Button
                        text="查询"
                        type="default"
                        onClick={() => {
                          getRequestData(treeSelectKey, changeTab, yearID, checkBoxData);
                        }}
                      />
                    </div>
                  </Item>
                </DevToolBar.Default>
              </div>
            </div>
          )}
          {treeSelectKey === '0-0-0-4' && (
            <div className={'search-tool-container1'}>
              <div style={{ width: '100%' }}>
                <DevToolBar.Default>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div
                      style={{
                        width: '150px',
                        paddingRight: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div
                        style={{
                          width: '48px',
                          padding: '0 2px',
                          lineHeight: '36px',
                        }}
                      >
                        年度：
                      </div>
                      <SelectBox
                        width="100"
                        dataSource={tableYearArr}
                        displayExpr="Data_ID"
                        valueExpr="Data_ID"
                        value={yearID}
                        onValueChanged={(e: any) => {
                          setTreeSelecNode((oldData: any) => {
                            const newData: any = { ...oldData };
                            newData.yearID = e.value;
                            return newData;
                          });
                          getRequestData(treeSelectKey, changeTab, e.value, checkBoxData);
                        }}
                      />
                    </div>
                  </Item>
                  <Item location={'before'} locateInMenu={'auto'}>
                    <div
                      style={{
                        paddingRight: '8px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div
                        style={{
                          width: '48px',
                          padding: '0 2px',
                          lineHeight: '36px',
                        }}
                      >
                        尾数：
                      </div>
                      <TextBox
                        width={150}
                        value={valWs}
                        // valueChangeEvent='keyup'
                        onValueChange={(value: any) => {
                          console.log(value, '@@@');
                          setSearchParams((oldData: any) => {
                            return { ...oldData, valWs: value };
                          });
                        }}
                      // inputAttr={nameLabel}
                      />
                    </div>
                  </Item>
                  <Item location={'before'}>
                    <div
                      style={{
                        height: '60px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <Button
                        text="查询"
                        type="default"
                        onClick={() => {
                          getRequestData(treeSelectKey, changeTab, yearID);
                        }}
                      />
                    </div>
                  </Item>
                </DevToolBar.Default>
              </div>
            </div>
          )}
          <DevGrid.RangeTap
            className={` ${className111} PaperDevSortableGrid devHeadersCenter `}
            height={'100%'}
            width="100%"
            ref={devGridRef}
            dataSource={dataGridData}
            keyExpr="dataGuid"
            defaultColumns={tempColumnsData}
            showBorders={true}
            showRowLines={true}
            showColumnLines={true}
            allowColumnResizing={true}
            noDataText={tempDataText}
            searchPanel={{
              visible: true,
              width: 180,
              placeholder: '',
            }}
            paging={{
              enabled: false,
            }}
            loadPanel={{ enabled: true }}
            scrolling={{
              mode: 'virtual',
              rowRenderingMode: 'virtual',
              renderAsync: true,
            }}
            onCellDblClick={(e) => {
              const { rowType, data, column } = e;
              if (rowType === 'data') {
                // console.log(e, data, column.dataField);
                if (treeSelectKey === '0-0-0-1' || treeSelectKey === '0-0-0-0') {
                  certificateListPupopRef.current.showPupop({
                    rowData: data,
                    yearID,
                    columnName: column.dataField,
                    pupopType: treeSelectKey === '0-0-0-1' ? '2' : '1',
                    changeNodeKey: treeSelectKey,
                    pupopTabsType: changeTab,
                  });
                } else if (treeSelectKey === '0-0-0') {
                  if (changeTab === '1') {
                    certificateListPupopRef.current.showPupop({
                      rowData: data,
                      yearID,
                      columnName: column.dataField,
                      pupopType: '1',
                      changeNodeKey: treeSelectKey,
                      pupopTabsType: changeTab,
                    });
                  } else {
                    msgInfo(`正在打开 其他会计分录测试模型,请稍候...`);
                    // UserCode={1} UserPwd={c4ca4238a0b923820dcc509a6f75849b} ProjectCode={202202-AUD-2020-001} ZcbfID={202202-AUD-2020-001}
                    if (window.electronComponents) {
                      const sessionParams = JSON.parse(window.sessionStorage.electronParams);
                      const { sjxmbh, ZcbfID } = sessionParams.params;
                      window.location.href = `cpas://OpenLocalFile/?fileName={UFCPAS4_PATH}/UFCPAS4.exe&params=UserCode={UserCode} UserPwd={UserPwd} ProjectCode=${sjxmbh} ZcbfID=${ZcbfID} Functions=FM_103 FunParameters="Data_ID=${yearID},KMBH=${data.KMBH}"`;
                    } else {
                      console.error('window["electronComponents"] false');
                    }
                  }
                } else if (
                  treeSelectKey === '0-0-1' ||
                  treeSelectKey === '0-0-0-2' ||
                  treeSelectKey === '0-0-0-3' ||
                  treeSelectKey === '0-0-0-4'
                ) {
                  let tmepRowData = [{ ...data, Data_ID: yearID, dbname }];
                  if (data.gap > 0) {
                    tmepRowData = [
                      ...tmepRowData,
                      {
                        PZBH: data.PZBH_Prior_Org,
                        PZLX: data.PZLX_Prior_Org,
                        PZRQ: data.PZRQ_Prior_Org,
                        Data_ID: yearID,
                        dbname,
                      },
                    ];
                  }
                  accountingVoucherPupopRef.current.showPupop(
                    { ...data, Data_ID: yearID, dbname },
                    tmepRowData,
                  );
                }
              }
            }}
            // columnMinWidth={120}
            sheetName={`${treeSelectName}${changeTab ? changeTab + devBox : ''}`}
            excelName={treeSelectName}
          >
            {/* <Selection mode="single" /> */}
            <ToolbarGrid>
              <ItemGrid location="after" visible={treeSelectKey === '0-0-1'}>
                <div
                  style={{
                    paddingRight: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <CheckBox
                    text="仅显示跳号的单据"
                    className="custom-checkbox"
                    value={checkBoxData}
                    onValueChanged={(e: any) => {
                      console.log(e.value, '@@@ e.value');
                      setSearchParams((oldData: any) => {
                        return { ...oldData, checkBoxData: e.value };
                      });
                      getRequestData(treeSelectKey, changeTab, yearID, e.value);
                    }}
                  />
                </div>
              </ItemGrid>
              <ItemGrid location="after" visible={treeSelectKey === '0-0-0'}>
                <div
                  style={{
                    paddingRight: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <CheckBox
                    text="仅显示存在差异的记录"
                    className="custom-checkbox"
                    // style={{ position: 'relative', top: -1 }}
                    value={checkBoxData}
                    onValueChanged={(e: any) => {
                      console.log(e.value, '@@@ e.value');
                      setSearchParams((oldData: any) => {
                        return { ...oldData, checkBoxData: e.value };
                      });
                      getRequestData(treeSelectKey, changeTab, yearID, e.value);
                    }}
                  />
                </div>
              </ItemGrid>
              <ItemGrid location="after" visible={treeSelectKey === '0-0-0-0'}>
                <Button
                  text="会计人员清单维护"
                  type="default"
                  onClick={() => {
                    personnelMaintenancePupopRef.current.showMaintenancePupop();
                  }}
                />
              </ItemGrid>
              <ItemGrid
                location={treeSelectKey === '0-0-0-4' ? 'before' : 'after'}
                visible={
                  treeSelectKey === '0-0-0' ||
                  treeSelectKey === '0-0-1' ||
                  treeSelectKey === '0-0-0-0' ||
                  treeSelectKey === '0-0-0-1' ||
                  treeSelectKey === '0-0-0-3'
                }
              >
                <div
                  style={{
                    width: '150px',
                    paddingRight: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      width: '48px',
                      padding: '0 2px',
                      lineHeight: '36px',
                    }}
                  >
                    年度：
                  </div>
                  <SelectBox
                    width="100"
                    dataSource={tableYearArr}
                    displayExpr="Data_ID"
                    valueExpr="Data_ID"
                    value={yearID}
                    onValueChanged={(e: any) => {
                      setTreeSelecNode((oldData: any) => {
                        const newData: any = { ...oldData };
                        newData.yearID = e.value;
                        return newData;
                      });
                      getRequestData(treeSelectKey, changeTab, e.value, checkBoxData);
                    }}
                  />
                </div>
              </ItemGrid>
              <ItemGrid location="after" name="searchPanel" />
              <ItemGrid location="after">
                <Button
                  icon="iconfont icon-refresh"
                  className="refreshButton_Style"
                  onClick={() => {
                    getRequestData(treeSelectKey, changeTab, yearID, checkBoxData);
                  }}
                />
              </ItemGrid>
            </ToolbarGrid>

            {treeSelectKey === '0-0-0-1' && (
              <Summary>
                <TotalItem
                  column="KMBH"
                  // summaryType="sum"
                  customizeText={(itemInfo: any) => {
                    return '小计：';
                  }}
                />
                <TotalItem
                  column="JFJE"
                  summaryType="sum"
                  customizeText={(itemInfo: any) => {
                    return itemInfo.value ? moneyFormatCol(itemInfo.value) : '';
                  }}
                />
                <TotalItem
                  column="DFJE"
                  summaryType="sum"
                  customizeText={(itemInfo: any) => {
                    return itemInfo.value ? moneyFormatCol(itemInfo.value) : '';
                  }}
                />
                <TotalItem
                  column="num"
                  summaryType="sum"
                  customizeText={(itemInfo: any) => {
                    return itemInfo.value ? moneyFormatCol(itemInfo.value) : '';
                  }}
                />
              </Summary>
            )}
          </DevGrid.RangeTap>
        </div>
      );
    }
    return <div> </div>;
  }, [dataGridData, tempColumnsData, devBox, treeSelectKey, yearID, searchParams, tableYearArr]);

  return (
    <>
      {tmepDataGrid}

      <CertificateListPupop ref={certificateListPupopRef} />
      <PersonnelMaintenancePupop
        ref={personnelMaintenancePupopRef}
        relaodTable={() => {
          getRequestData(treeSelectKey, changeTab, yearID);
        }}
      />
      <AccountingVoucherPupop ref={accountingVoucherPupopRef}
        cellDblClickCallback={(rowData: any, curYear: any) => {
          msgInfo(`正在打开 明细账,请稍候...`);
          if (window.electronComponents) {
            const sessionParams = JSON.parse(window.sessionStorage.electronParams);
            const { sjxmbh, ZcbfID } = sessionParams.params;
            window.location.href = `cpas://OpenLocalFile/?fileName={UFCPAS4_PATH}/UFCPAS4.exe&params=UserCode={UserCode} UserPwd={UserPwd} ProjectCode=${sjxmbh} ZcbfID=${ZcbfID} Functions=FM_103 FunParameters="Data_ID=${curYear},KMBH=${rowData.KMBH}"`;
          } else {
            console.error('window["electronComponents"] false');
          }
        }}
      />
    </>
  );
};
export default ComponentTableListList;
